<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;

        }
        #container{
            width: 80%;
            margin: 5px auto;
        }
        #head{
            width: 100%;
            height: 50px;
            background-color: aliceblue;
        }
        #main{
            width: 10%;
            height: 700px;
            margin-top: 5px;
            background-color: black;
        }
        #foot{
            width: 100%;
            height: 50px;
            background-color: aqua;
        }
        #left{
            float: left;
            width: 15%;
            height: 700px;
            background-color: darkred;
        }
        #center{
            float: left;
            width: 60%;
            height: 700px;
            background-color: blue;
            margin: 0 5px;

        }
        #right{
            float: left;
            width: 15%;
            height: 700px;
            background-color: blueviolet;
        }
        form{
            display: inline-block;
            float: right;
        }
        a{
            display: inline-block;
            text-decoration: none;

        }
        span{

            color: brown;
        }
        .te{
            height: 50px;
            margin-top: 10px;
        }
        .btn{
            width: 30px;
            height:30px;
            margin: 10px;

        }
        .box{
            width: 300px;
            height: 200px;
            position: relative;
        }
        .one{
            width: 300px;
            height: 200px;
            
        }
    </style>
</head>
<body>
    <div id = "container">
        <div id ="logo">
            <a href="#"><span>W3</span>school</a>
            <form action="">
                <input class="te" type="text">
                <input class="btn"  ="text">
            </form>
        </div>
        <div id = "head"></div>
        <div id = "main">
            <div id="left">
            </div>
            <div id="center">
                <div id="box">

                </div>
            </div>
        </div>
        
    </div>
    
</body>
</html>